import { useEffect, useState, useCallback } from "react";
import "./App.css";
import HorizontalBar from "./components/HorizontalBar";
import RadarBar from "./components/RadarBar";
import Relation from "./components/Relation";
import VerticalBar from "./components/VerticalBar";
import RadiueBar from "./components/RadiueBar";
import WordCloud from "./components/WordCloud";
import { getVisualization } from "@/api/echarts";
import type { RelationProps } from "@/types/echarts";
interface DataItem {
  id: number;
  name: string;
  value: number;
}

type AppProps = {
  regionData: { regions: DataItem[] };
  riskData: { risks: DataItem[] };
  serverData: { servers: DataItem[] };
  abnormalData: { abnormals: DataItem[] };
  wordCloudData: { datas: DataItem[] };
  relationData: { relations: RelationProps[] };
};

export default function App() {
  const [data, setData] = useState<AppProps>({
    regionData: { regions: [] },
    riskData: { risks: [] },
    serverData: { servers: [] },
    abnormalData: { abnormals: [] },
    wordCloudData: { datas: [] },
    relationData: { relations: [] },
  });

  const loadData = useCallback(async () => {
    const { data } = await getVisualization();
    setData(data);
  }, []);

  useEffect(() => {
    loadData();
    const intervalId = setInterval(loadData, 5000);
    return () => clearInterval(intervalId);
  }, [loadData]);

  return (
    <div className="w-full bg-[url('../src/assets/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden">
      <div className="flex-1 p-3 mr-5 bg-opacity-50 bg-slate-800 flex flex-col gap-5">
        <HorizontalBar data={data.regionData.regions} />
        <RadarBar radarData={data.riskData.risks} />
        <Relation data={data.relationData.relations} />
      </div>
      <div className="w-1/2 p-3 mr-5 bg-opacity-50 bg-slate-800 flex flex-col gap-5"></div>
      <div className="flex-1 p-3 bg-opacity-50 bg-slate-800 flex flex-col gap-5">
        <VerticalBar data={data.serverData.servers} />
        <RadiueBar data={data.regionData.regions} />
        <WordCloud data={data.wordCloudData.datas} />
      </div>
    </div>
  );
}
